<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>House：{{ house }}</h4>
		<button @click="changeToy">change child1's toy</button>
		<button @click="changePc">change child2's computer</button>
		<button @click="getAll($refs)">add all childs book num</button>
		<Child1 ref="c1"/>
		<Child2 ref="c2"/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import type { RefSymbol } from '@vue/reactivity';
import Child1 from './Child1.vue'
	import Child2 from './Child2.vue'
	import { ref } from 'vue'

	let house = ref(4)
	let c1 = ref()
	let c2 = ref()

	function changeToy() {
		c1.value.toy = 'xiaozhu'
	}
// docker pull registry.ly-sky.com:5000/dev/ly-cea-ui:1.115
// docker tag registry.ly-sky.com:5000/dev/ly-cea-ui:1.115 master:5000/ly-cea-ui:1.115-1201
// docker push master:5000/ly-cea-ui:1.115-1201 ez9y
	function changePc() {
		c2.value.computer = 'Mac'
	}

	function getAll(refs:{[key:string]:any}) {
		for (let key in refs) {
			refs[key].book += 3;
			
		}
	}

	// expose data
	defineExpose({house})
</script>

<style scoped>
	.father {
		background-color: rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}

	.father button {
		margin-bottom: 10px;
		margin-left: 10px;
	}
</style>

